<template>
	<div class="app_container">
		<div class="baseBorderRadius baseBoderShadow bgWhite">
			<div class="operate_container"
			  style="background-color: #fff">
				<div class="operate_item">
					<div class="operate_left">流程名称：</div>
					<div class="operate_right">
						<el-input v-model.trim="name"
						  placeholder="请输入内容"></el-input>
					</div>
				</div>
				<div class="operate_item">
					<el-button type="primary"
					  @click="searchFunc">搜 索</el-button>
					<el-button @click="resetFunc">重 置</el-button>
				</div>
			</div>
			<div class="handle_wrap">
				<el-button @click="createProcess"
				  type="primary">绘制流程图</el-button>
			</div>

			<!-- <div style="margin: 10px 0">
      <el-button @click="createProcess" type="primary">绘制流程图</el-button>
    </div> -->
			<!-- <el-button @click="processList">已定义流程列表</el-button> -->
			<div class="table_wrap">
				<div class="table_box">
					<el-table :data="tableData"
					  border
					  style="width: 100%">
						<el-table-column prop="id"
						  label="流程id"
						  width="100"> </el-table-column>
						<el-table-column prop="name"
						  label="流程名称"
						  width="180">
						</el-table-column>
						<el-table-column prop="key"
						  label="流程关键字"> </el-table-column>
						<el-table-column label="已结束实例数" align="center" width="120">
							<template slot-scope="scope">
								<el-button type="text"
								  @click="toProcessCase(scope.row, 1)">{{ scope.row.finished }}
								</el-button>
							</template>
						</el-table-column>
						<el-table-column label="进行中实例数" align="center" width="120">
							<template slot-scope="scope">
								<el-button type="text"
								  @click="toProcessCase(scope.row, 0)">{{ scope.row.unfinished }}
								</el-button>
							</template>
						</el-table-column>
						<el-table-column prop="createTime"
						  label="流程创建时间">
						</el-table-column>
						<el-table-column prop="deploymentId"
              width="100"
						  label="流程发布id">
						</el-table-column>
						<el-table-column prop=""
						  label="操作"
						  width="200"
						  align="center">
							<template slot-scope="scope">
								<el-button type="primary" class="btnBlue" size="mini" round @click="editProcess(scope.row.id)">编辑</el-button>
								<el-button type="danger" size="mini" round @click="delProcess(scope.row.id)">删除</el-button>
								<el-button type="success" size="mini" round @click="pubProcess(scope.row.id)">发布</el-button>
								<!-- <el-button @click="viewProcessImage(scope.row.deploymentId)">查看流程图</el-button> -->
								<!-- <el-button @click="addInstance(scope.row.deploymentId)">添加实例</el-button> -->
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>

			<div class="page_box">
				<el-pagination v-show="totalSize"
				  background
				  :current-page="currentPage"
				  :page-size="pageSize"
				  layout="total, prev, pager, next, jumper"
				  :total="totalSize"
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"></el-pagination>
			</div>
		</div>
		<el-dialog title="查看流程图"
		  width="600px"
		  :visible.sync="dialogVisible">
			<div>
				<img :src="img_src" />
			</div>

			<div slot="footer"
			  class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary"
				  @click="dialogVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 流程实例的弹出层 -->
		<el-dialog title="流程实例"
		  width="1200px"
		  :visible.sync="dialogLcsl">
			<lcsl-comp :is-finish="isFinish"
			  :activiti-key="activitiKey" />
		</el-dialog>
	</div>
</template>
<script>
import Lcsl from "./lcsl.vue";
export default {
  components: {
    "lcsl-comp": Lcsl
  },
  data() {
    return {
      // 流程实例的弹出层
      dialogLcsl: false,
      // 查看流程实例的key
      activitiKey: "",
      // 查看流程实例的已完成/未完成
      isFinish: null,
      tableData: [],
      taskTableData: [],
      iframe_show: false,
      iframe_src: "",
      radio: "",
      image_show: "",
      image_url: "",
      srcList: [],
      name: "", // 流程名称
      searchData: {
        name: ""
      }, // 查询数据
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      dialogVisible: false,
      img_src: ""
    };
  },
  mounted() {
    this.processList();
  },
  methods: {
    /**
     * @name toProcessCase
     * @description 打开对应的流程实例页面
     * @param {
     *  param  流程信息
     *  flag  1 finished  2 unfinished
     * }
     * @author cjs
     * @date 2021-04-30 09:00:06
     */
    toProcessCase(param, flag) {
      // isFinish  1 已完成 0未完成
      this.isFinish = flag;
      this.activitiKey = param.key;
      this.dialogLcsl = true;
    },
    /**
     * @name handleCurrentChange
     * @description 分页切换
     * @author cjs1992
     * @date 2019-11-07 15:30:17
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.processList();
    },
    /**
     * @name handleSizeChange
     * @description 切换每页条数
     * @author cjs1992
     * @date 2019-11-07 15:30:46
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    /**
     * @name searchFunc
     * @description 搜索方法
     * @author cjs1992
     * @date 2019-11-07 15:25:32
     */
    async searchFunc() {
      this.searchData = {
        name: this.name
      };
      this.currentPage = 1;
      this.processList();
    },
    /**
     * @name resetFunc
     * @description 重置
     * @author cjs1992
     * @date 2019-11-07 15:25:56
     */
    async resetFunc() {
      this.name = "";
      this.searchFunc();
    },
    async processList() {
      const data = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        name: this.searchData.name
      };
      const res = await this.$store.dispatch("lcgl/processList", data);
      const resData = res.data;
      this.tableData = resData.models;
      this.totalSize = resData.num;
    },
    async createProcess() {
      window.open("/web/activiti/draw", "_blank");
      // this.iframe_show = true;
      // this.iframe_src = "web/activiti/create";
    },
    async editProcess(modelId) {
      window.open("/web/activiti/editor?modelId=" + modelId, "_blank");
      // this.iframe_show = true;
      // this.iframe_src = "web/activiti/editor?modelId="+modelId;
    },
    async viewProcessImage(deploymentId) {
      this.img_src = "/web/activiti/viewProcess?deploymentId=" + deploymentId;
      // this.srcList[0] = "web/activiti/viewProcess?deploymentId=" + deploymentId;
      this.dialogVisible = true;
    },

    async delProcess(id) {
      const res = await this.$store.dispatch("lcgl/delProcess", {
        id
      });
      this.$message({
        type: "success",
        message: "删除成功!"
      });
      this.processList();
    },
    async pubProcess(id) {
      const res = await this.$store.dispatch("lcgl/pubProcess", {
        id
      });
      this.$message({
        type: "success",
        message: "发布成功!"
      });
      this.processList();
    },
    async addInstance(deploymentId) {
      const res = await this.$store.dispatch("lcgl/addInstance", {
        deploymentId: deploymentId
      });
    },
    async myTaskList() {
      const res = await this.$store.dispatch("lcgl/myTaskList", {});
      this.taskTableData = res.data;
    },
    async completeTask(taskId) {
      const res = await this.$store.dispatch("lcgl/completeTask", {
        taskId: taskId,
        status: this.radio
      });
    },
    async myHiTaskList() {
      const res = await this.$store.dispatch("lcgl/myHiTaskList", {});
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
.table_wrap {
  padding: 10px 20px;
}
.page_box {
  text-align: center;
}
</style>
